@import "../../styles/mixin.less";

.home {
  // background-image: url("../../assets/pngs/02.home-bg.png");
  width:100%;
  background:#fff;
  position:relative;
  height:100%;
  background-repeat: no-repeat;
  // 这个地方有待商榷
  background-size: 100% 100%;
  overflow: hidden;
  .flex();
  justify-content: center;
  .action{
    display: inline-block;
    button{
      padding: 0 16px;
      height: 36px;
      border-radius: 4px;
      outline: none;
      border: 1px solid rgba(0, 0, 0, 0.2);
      cursor: pointer;
      color: rgb(54, 52, 52);
      box-shadow: -1px 1px 1px 1px rgba(78, 78, 78, 0.5);
      font-size: 13px;
      font-weight: 600;
      margin: 5px;
      overflow: hidden;
      width:150px;

      background-image: linear-gradient(125deg, #71ffd7,#1835de);
      color: #fff;
      box-shadow: none;
      border: none;

    }

    button:hover {
      opacity: 0.7;
    }
    button:active {
      transform: translateY(1px);
    }
  }

  .gray {
    position:absolute;
    background:#f7f7f7;
    // background:red;
    width: 376px;
    height: 376px;
    transform: rotate(119deg);
    top: -94px;
    border-radius: 0 36% 0% 0%;
    left: -35px;
    .g1{
      width: 418px;
      height: 500px;
      background:#f7f7f7;
      // background: red;
      position: absolute;
      top: -93px;
      left: -34px;
      border-radius: 24% 55% 0% 0%;
    }
  }

  .blue{
    position:absolute;
    // background: red;
    background:#1735de;
    width: 500px;
    height: 500px;
    right: -140px;
    bottom: 42%;
    border-radius: 49% 0% 0% 20%;
    .b1 {
      width: 481px;
      height: 400px;
      background:#1735de;
      position: absolute;
      top: 248px;
      transform: rotate(30deg);
      left: 1px;
      border-radius: 0% 0% 20% 45%;
    }
  }
  
  .green{
    position:absolute;
    background:#71ffd7;
    width: 500px;
    height: 500px;
    bottom: -280px;
    left: 0px;
    border-radius: 36% 0% 0% 0%;
    transform: rotate(61deg);
    .g1{
      width: 600px;
      height: 600px;
      position: absolute;
      background:#71ffd7;
      left: 18px;
      top: -87px;
      border-radius: 17% 0% 0% 43%;
      transform: rotate(59deg);
    }
  }
}

@media only screen and (max-width: 768px) {
  .home {
    background-image: url("../../assets/pngs/05.mobile-home-bg.jpg")!important;
  }
}
